<template>
    <GeneralOperationForm
        :navLists="navLists"
    >
        <template #default>
            <el-form 
                ref="ruleFormRef1"
                :model="formData1" 
                :rules="rules1"
                label-width="8vw"
                status-icon
                label-position="left"
            >
                <Section :list="navLists[0]" />
                <Section :list="navLists[1]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="行政区划"
                        prop="divisionCode"
                    >
                        <AdministrativeDivisionsCascader 
                            style="width: 100%;" 
                            v-model="formData1.divisionCode" 
                            v-model:orgName="formData1.orgName" 
                            v-model:district="formData1.district" 
                            v-model:townStreet="formData1.townStreet" 
                            v-model:village="formData1.village" 
                        />
                    </el-form-item>
                    <el-form-item 
                        label="机构名称"
                        prop="name"
                    >
                        <el-input 
                            v-model="formData1.name"
                            clearable 
                            placeholder="请输入机构名称"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否和未成年人救助保护中心合署办公"
                        prop="workWithMp"
                    >
                        <GeneralSelect
                            v-model="formData1.workWithMp"
                            clearable
                            placeholder="请选择是否和未成年人救助保护中心合署办公"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="统一社会信用代码"
                        prop="creditCode"
                    >
                        <el-input 
                            v-model="formData1.creditCode" 
                            clearable
                            placeholder="请输入统一社会信用代码"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="机构类型"
                        prop="orgType"
                    >
                        <GeneralSelect
                            v-model="formData1.orgType"
                            clearable
                            placeholder="请选择机构类型"
                            :dictionary="GENERAL_REMOTE_OPTIONS[5]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="成立日期"
                        prop="foundDate"
                    >
                        <el-date-picker
                            v-model="formData1.foundDate"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            style="width: 100%"
                            placeholder="请选择成立日期"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="事业单位法人证书有效期开始日期"
                        prop="legalStarttime"
                    >
                        <el-date-picker
                            v-model="formData1.legalStarttime"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            style="width: 100%"
                            placeholder="请选择事业单位法人证书有效期开始日期"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="事业单位法人证书有效期失效日期"
                        prop="legalEndtime"
                    >
                        <el-date-picker
                            v-model="formData1.legalEndtime"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            style="width: 100%"
                            placeholder="请选择事业单位法人证书有效期失效日期"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="法定代表人"
                        prop="legalRepresentative"
                    >
                        <el-input 
                            v-model="formData1.legalRepresentative" 
                            clearable
                            placeholder="请输入法定代表人"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="院址"
                        prop="address"
                    >
                        <el-input 
                            v-model="formData1.address" 
                            clearable
                            placeholder="请输入院址"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="邮政编码"
                        prop="postCode"
                    >
                        <el-input 
                            v-model="formData1.postCode" 
                            clearable
                            type="number"
                            placeholder="请输入邮政编码"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="咨询电话"
                        prop="oneNumber"
                    >
                        <el-input 
                            v-model="formData1.oneNumber" 
                            clearable
                            placeholder="请输入咨询电话"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="咨询电话是否114可查"
                        prop="phoneNumberSearchable"
                    >
                        <GeneralSelect
                            v-model="formData1.phoneNumberSearchable"
                            clearable
                            placeholder="请选择咨询电话是否114可查"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item>

                    <el-form-item 
                        label="传真"
                        prop="fax"
                    >
                        <el-input 
                            v-model="formData1.fax" 
                            clearable
                            placeholder="请输入传真"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="负责人"
                        prop="manager"
                    >
                        <el-input 
                            v-model="formData1.manager" 
                            clearable
                            placeholder="请输入负责人"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="负责人联系电话"
                        prop="managerPhoneNumber"
                    >
                        <el-input 
                            v-model="formData1.managerPhoneNumber" 
                            clearable
                            placeholder="请输入负责人联系电话"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="规划床位数"
                        prop="plannedBedCount"
                    >
                        <el-input 
                            v-model="formData1.plannedBedCount" 
                            type="number"
                            clearable
                            placeholder="请输入规划床位数"
                        >
                            <template #append>
                                <div>个</div>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item 
                        label="核定床位数"
                        prop="bedCount"
                    >
                        <el-input 
                            v-model="formData1.bedCount" 
                            type="number"
                            clearable
                            placeholder="请输入核定床位数"
                        >
                            <template #append>
                                <div>个</div>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item 
                        label="占地面积"
                        prop="landArea"
                    >
                        <el-input 
                            v-model="formData1.landArea" 
                            type="number"
                            clearable
                            placeholder="请输入占地面积"
                        >
                            <template #append>
                                <div>㎡</div>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item 
                        label="总投资（万元）"
                        prop="totalInvestment"
                    >
                        <el-input 
                            v-model="formData1.totalInvestment" 
                            clearable
                            placeholder="请输入总投资（万元）"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="资金来源"
                        prop="sourceOfFunds"
                    >
                        <el-input 
                            v-model="formData1.sourceOfFunds" 
                            clearable
                            placeholder="请输入资金来源"
                        />
                    </el-form-item>
                </div>
                
                <Section :list="navLists[2]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="医疗模式"
                        prop="healthMode"
                    >
                        <GeneralSelect
                            v-model="formData1.healthMode"
                            clearable
                            placeholder="请选择医疗模式"
                            :dictionary="GENERAL_REMOTE_OPTIONS[4]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="内设医疗机构名"
                        prop="inbuiltMedicalAgencies"
                    >
                        <el-input 
                            v-model="formData1.inbuiltMedicalAgencies" 
                            clearable
                            placeholder="请输入内设医疗机构名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否取得执业许可证"
                        prop="isPermit"
                    >
                        <GeneralSelect
                            v-model="formData1.isPermit"
                            clearable
                            placeholder="请选择是否取得执业许可证"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="开通绿色通道的合作医疗机构名称"
                        prop="collaborationMedicalAgencies"
                    >
                        <el-input 
                            v-model="formData1.collaborationMedicalAgencies"
                            clearable 
                            placeholder="请输入开通绿色通道的合作医疗机构名称"
                        />
                    </el-form-item>
                </div>
                <Section :list="navLists[3]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="康复模式"
                        prop="convalescentMode"
                    >
                        <GeneralSelect
                            v-model="formData1.convalescentMode"
                            clearable
                            placeholder="请选择康复模式"
                            :dictionary="GENERAL_REMOTE_OPTIONS[2]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="定点康复机构名称"
                        prop="convalescentAgencies"
                    >
                        <el-input 
                            v-model="formData1.convalescentAgencies" 
                            clearable
                            placeholder="请输入定点康复机构名称"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="服务的残疾类型"
                        prop="disabilityType"
                    >
                        <GeneralSelect
                            v-model="formData1.disabilityType"
                            multiple
                            collapseTags
                            collapseTagsTooltip
                            clearable
                            placeholder="请选择服务的残疾类型"
                            :dictionary="GENERAL_REMOTE_OPTIONS[0]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="初次认定时间"
                        prop="recognizedDate"
                    >
                        <el-date-picker
                            v-model="formData1.recognizedDate"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            style="width: 100%"
                            placeholder="请选择初次认定时间"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="康复医师数量"
                        prop="physicianNumber"
                    >
                        <el-input 
                            v-model="formData1.physicianNumber" 
                            type="number"
                            clearable
                            placeholder="请输入康复医师数量"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="康复治疗师数量"
                        prop="therapistsNumber"
                    >
                        <el-input 
                            v-model="formData1.therapistsNumber" 
                            type="number"
                            clearable
                            placeholder="请输入康复治疗师数量"
                        />
                    </el-form-item>
                </div>

                <Section :list="navLists[4]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="教育模式"
                        prop="educateMode"
                    >
                        <GeneralSelect
                            v-model="formData1.educateMode"
                            clearable
                            placeholder="请选择教育模式"
                            :dictionary="GENERAL_REMOTE_OPTIONS[3]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="特教老师人数"
                        prop="teacherNumber"
                    >
                        <el-input 
                            v-model="formData1.teacherNumber" 
                            type="number"
                            clearable
                            placeholder="请输入特教老师人数"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="其中编制特教老师人数"
                        prop="weaveTeacherNumber"
                    >
                        <el-input 
                            v-model="formData1.weaveTeacherNumber" 
                            type="number"
                            clearable
                            placeholder="请输入其中编制特教老师人数"
                        />
                    </el-form-item>
                </div>

                <Section :list="navLists[5]" />
                <div class="edit-form-item">
                    <el-form-item 
                        v-for="(item, index) in formData1.attachments"
                        :key="`attachments-${index}`"
                        label-width="0"
                        prop="attachments"
                    >
                        <FormUploadImage 
                            v-model:imageStr="item.attachmentName"
                            :title="item.attachmentTitle"
                        />
                    </el-form-item>
                </div>
            </el-form>
        </template>
        <template #footer>
            <el-button 
                type="primary"
                @click="onSubmit1(ruleFormRef1)"
            >
                保存
            </el-button>
        </template>
    </GeneralOperationForm>
</template>
  
<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        UploadFilled
    } from '@element-plus/icons-vue'
    import { 
        welfareorgsGetWelfareOrgsInfoApi, 
        welfareorgsAddChildInfoApi, 
    } from '@/apis'

    import { isPhone } from '@/utils'
    import GeneralOperationForm from '@/components/generalOperationForm/GeneralOperationForm.vue'
    import Section from '@/components/section/Section.vue'
    import AdministrativeDivisionsCascader from '@/components/administrativeDivisionsCascader/AdministrativeDivisionsCascader.vue'
    import FormUploadImage from '@/components/formUploadImage/FormUploadImage.vue'
    import GeneralSelect from '@/components/generalSelect/GeneralSelect.vue'

    import { GENERAL_OPTIONS_1, GENERAL_REMOTE_OPTIONS } from '@/constants'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const dialogObj = defineModel<any>('dialogObj', {
        required: false,
        default: {}
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        tabelSearch: [data?: any]
    }>()
    // 侧边栏
    const navLists:Ref<any[]> = ref([
        {
            text: '基本信息',
            id: 'nav-id-1',
            level: 1,
        },
        {
            text: '机构基本信息',
            id: 'nav-id-1-1',
            level: 2,
        },
        {
            text: '医疗情况',
            id: 'nav-id-1-2',
            level: 2,
        },
        {
            text: '定点康复情况',
            id: 'nav-id-1-3',
            level: 2,
        },
        {
            text: '纳入特救系统情况',
            id: 'nav-id-1-4',
            level: 2,
        },
        {
            text: '附件',
            id: 'nav-id-2',
            level: 1,
        },
    ])

    const ruleFormRef1 = ref<any>()
    const formData1: Ref<any> = ref({
        divisionCode: '',
        orgName: '',
        district: '',
        townStreet: '',
        village: '',
        name: '',
        workWithMp: '',
        creditCode: '',
        orgType: '',
        foundDate: '',
        legalStarttime: '',
        legalEndtime: '',
        legalRepresentative: '',
        address: '',
        postCode: '',
        oneNumber: '',
        phoneNumberSearchable: '',
        fax: '',
        manager: '',
        managerPhoneNumber: '',
        plannedBedCount: '',
        bedCount: '',
        landArea: '',
        totalInvestment: '',
        sourceOfFunds: '',
        healthMode: '',
        inbuiltMedicalAgencies: '',
        isPermit: '',
        collaborationMedicalAgencies: '',
        convalescentMode: '',
        convalescentAgencies: '',
        disabilityType: '',
        recognizedDate: '',
        physicianNumber: '',
        therapistsNumber: '',
        educateMode: '',
        teacherNumber: '',
        weaveTeacherNumber: '',
        attachments: [
            {
                attachmentName: '', //附件地址名称（多个中间用，分割）	
                attachmentTitle: '机构名称', //附件名称 （例如：身份证正面、身份证反面、学位证书、毕业证书、机构附件）
                entitySubType: '', //附件子类型枚举
                entitySubTypeName: '', //附件子类型名称
                id: '',
            }
        ], //https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg,https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg
    })
    const rules1 = reactive<any>({
        orgName: [
            { 
                required: true, 
                message: '请选择行政区划！', 
                trigger: 'blur' 
            },
        ],
        name: [
            { 
                required: true, 
                message: '请输入机构名称！', 
                trigger: 'blur' 
            },
        ],
        workWithMp: [
            { 
                required: true, 
                message: '请选择是否和未成年人救助保护中心合署办公！', 
                trigger: 'blur' 
            },
        ],
        creditCode: [
            { 
                required: true, 
                message: '请输入统一社会信用代码！', 
                trigger: 'blur' 
            },
        ],
        orgType: [
            { 
                required: true, 
                message: '请选择机构类型！', 
                trigger: 'blur' 
            },
        ],
        foundDate: [
            { 
                required: true, 
                message: '请选择成立日期！', 
                trigger: 'blur' 
            },
        ],
        legalStarttime: [
            { 
                required: true, 
                message: '请选择事业单位法人证书有效期开始日期！', 
                trigger: 'blur' 
            },
        ],
        legalEndtime: [
            { 
                required: true, 
                message: '请选择事业单位法人证书有效期失效日期！', 
                trigger: 'blur' 
            },
        ],
        legalRepresentative: [
            { 
                required: true, 
                message: '请输入法定代表人！', 
                trigger: 'blur' 
            },
        ],
        address: [
            { 
                required: true, 
                message: '请输入院址！', 
                trigger: 'blur' 
            },
        ],
        postCode: [
            { 
                required: true, 
                message: '请输入邮政编码！', 
                trigger: 'blur' 
            },
        ],
        oneNumber: [
            { 
                required: true, 
                message: '请输入咨询电话！', 
                trigger: 'blur' 
            },
        ],
        phoneNumberSearchable: [
            { 
                required: true, 
                message: '请选择咨询电话是否114可查！', 
                trigger: 'blur' 
            },
        ],
        fax: [
            { 
                required: true, 
                message: '请输入传真！', 
                trigger: 'blur' 
            },
        ],
        manager: [
            { 
                required: true, 
                message: '请输入负责人！', 
                trigger: 'blur' 
            },
        ],
        managerPhoneNumber: [
            { 
                required: true, 
                message: '请输入负责人联系电话！', 
                trigger: 'blur' 
            },
        ],
        plannedBedCount: [
            { 
                required: true, 
                message: '请输入规划床位数！', 
                trigger: 'blur' 
            },
        ],
        bedCount: [
            { 
                required: true, 
                message: '请输入核定床位数！', 
                trigger: 'blur' 
            },
        ],
        landArea: [
            { 
                required: true, 
                message: '请输入占地面积！', 
                trigger: 'blur' 
            },
        ],
        totalInvestment: [
            { 
                required: true, 
                message: '请输入总投资（万元）！', 
                trigger: 'blur' 
            },
        ],
        sourceOfFunds: [
            { 
                required: true, 
                message: '请输入资金来源！', 
                trigger: 'blur' 
            },
        ],
        // attachments: [
        //     { 
        //         validator: (rule: any, value: any, callback: any) => {
        //             console.log(value)
        //             if (value) {
        //                 callback()
        //             } else {
        //                 callback(new Error('请上传图片！'))
        //             }
        //         }, 
        //         trigger: 'blur' 
        //     },
        // ],
    })
  
    onMounted(() => {
        // if (dialogObj.value?.dialogParams.id) {
            welfareorgsGetWelfareOrgsInfoApi({
                id: dialogObj.value.dialogParams?.id ? dialogObj.value.dialogParams?.id : ''
            }).then((res: any) => {
                formData1.value = res.data
            })
        // }
    })

    const onSubmit1 = (formEl: any) => {
        if (!formEl) return;
        // console.log(formData1.value)
        formEl.validate((valid, fields) => {
            // console.log(valid)
            // console.log(fields)
            if (valid) {
                // console.log('submit!')
                // 调接口，接口成功后
                welfareorgsAddChildInfoApi({
                    ...formData1.value
                }).then(res => {
                    emits('tabelSearch')
                    dialogObj.value.dialogVisible = false
                }).catch(err => {
                    // ElMessage({
                    //     type: 'error',
                    //     message: '系统异常，请稍后重试！',
                    // })
                })
            } else {
                // console.log('error submit!')
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                })
            }
        })
    }

    
</script>
  
<style lang="scss" scoped>
    .edit-form-item {
        @include edit-form-item;
    }
</style>
